/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import {Button, Checkbox, ConfigProvider, Dialog, Field, Form, Input, Loading} from '@alifd/next';
import SuccessDialog from '../../../components/SuccessDialog';
import {getParams, request} from '../../../globalLib';

import './index.scss';

@ConfigProvider.config

class ConfigSync extends React.Component {
  static displayName = 'ConfigSync';

  static propTypes = {
    locale: PropTypes.object,
    history: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.successDialog = React.createRef();
    this.field = new Field(this);
    this.dataId = getParams('dataId') || 'yanlin';
    this.group = getParams('group') || '';
    this.serverId = getParams('serverId') || '';

    this.state = {
      configType: 0,

      envvalues: [],
      commonvalue: [],
      envComponent: '',
      envGroups: [],
      envlist: [],
      loading: false,
      showmore: false,
    };
    this.codeValue = '';
    this.mode = 'text';
    this.ips = '';
  }

  componentDidMount() {
    this.getDataDetail();
    //  this.getDomain();
  }

  toggleMore() {
    this.setState({
      showmore: !this.state.showmore,
    });
  }

  getEnvList(value) {
    this.setState({
      envvalues: value,
    });
    this.envs = value;
  }

  getDomain() {
    const self = this;
    request({
      url: '/diamond-ops/env/domain',
      success(data) {
        if (data.code === 200) {
          const {envGroups} = data.data;

          self.setState({
            envGroups,
          });
        }
      },
    });
  }

  getDataDetail() {
    const self = this;
    const {locale = {}} = this.props;
    this.tenant = getParams('namespace') || '';
    this.serverId = getParams('serverId') || 'center';
    let url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${
      this.dataId
      }/group/${this.group}/tenant/${this.tenant}?id=`;
    if (this.tenant === 'global' || !this.tenant) {
      url = `/diamond-ops/configList/detail/serverId/${this.serverId}/dataId/${this.dataId}/group/${
        this.group
        }?id=`;
    }
    request({
      url,
      beforeSend() {
        self.openLoading();
      },
      success(result) {
        if (result.code === 200) {
          const {data = {}} = result;

          self.field.setValue('dataId', data.dataId);
          // self.field.setValue('content', data.content);
          self.field.setValue('appName', data.appName);
          // self.field.setValue('envs', self.serverId);
          self.field.setValue('group', data.group);
          // self.field.setValue('md5', data.md5);
          self.field.setValue('content', data.content || '');
          const env = data.envs || [];
          const envvalues = [];
          const envlist = [];
          for (let i = 0; i < env.length; i++) {
            envlist.push({
              value: env[i].serverId,
              label: env[i].name,
            });
            if (env[i].serverId === self.serverId) {
              envvalues.push(self.serverId);
            }
          }
          self.setState({
            envlist,
            envvalues,
            // self.setState({
            //     envname: env.name,
            // })
            // self.serverId = env.serverId;
          });
        } else {
          Dialog.alert({
            title: locale.error,
            content: result.message,
          });
        }
      },
      complete() {
        self.closeLoading();
      },
    });
  }

  goList() {
    this.props.history.push(
      `/configurationManagement?serverId=${this.serverId}&group=${this.group}&dataId=${this.dataId}`
    );
  }

  sync() {
    const self = this;
    const {locale = {}} = this.props;
    const payload = {
      dataId: this.field.getValue('dataId'),
      appName: this.field.getValue('appName'),
      group: this.field.getValue('group'),
      content: this.field.getValue('content'),
      betaIps: this.ips,
      targetEnvs: this.envs,
    };
    request({
      type: 'put',
      contentType: 'application/json',
      url: `/diamond-ops/configList/serverId/${this.serverId}/dataId/${payload.dataId}/group/${
        payload.group
        }?id=`,
      data: JSON.stringify(payload),
      success(res) {
        const _payload = {};
        _payload.maintitle = locale.syncConfigurationMain;
        _payload.title = locale.syncConfiguration;
        _payload.content = '';
        _payload.dataId = payload.dataId;
        _payload.group = payload.group;
        _payload.isok = res.code === 200;
        if (!_payload.isok) {
          _payload.isok = false;
          _payload.message = res.message;
        }
        self.successDialog.current.openDialog(_payload);
      },
    });
  }

  syncResult() {
    const dataId = this.field.getValue('dataId');
    const gruop = this.field.getValue('group');
    this.props.history.push(
      `/diamond-ops/static/pages/config-sync/index.html?serverId=center&dataId=${dataId}&group=${gruop}`
    );
  }

  changeEnv(values) {
    this.targetEnvs = values;
    this.setState({
      envvalues: values,
    });
  }

  getIps(value) {
    this.ips = value;
  }

  goResult() {
    this.props.history.push(
      `/consistencyEfficacy?serverId=${this.serverId}&dataId=${this.dataId}&group=${this.group}`
    );
  }

  openLoading() {
    this.setState({
      loading: true,
    });
  }

  closeLoading() {
    this.setState({
      loading: false,
    });
  }

  render() {
    const {init} = this.field;
    const {locale = {}} = this.props;
    const formItemLayout = {
      labelCol: {
        span: 2,
      },
      wrapperCol: {
        span: 22,
      },
    };

    return (
      < div
    style = {
    {
      padding: 10
    }
  }>
  <
    Loading
    shape = "flower"
    style = {
    {
      position: 'relative', width
    :
      '100%'
    }
  }
    visible = {this.state.loading}
    tip = "Loading..."
    color = "#333"
      >
      < h1 > {locale.syncConfiguration} < /h1>
      < Form
    field = {this.field} >
      < Form.Item
    label = "Data ID:"
    required
    {...
      formItemLayout
    }
  >
  <
    Input
    htmlType = "text"
    disabled = {'disabled'}
    {...
      init('dataId')
    }
    />
    < div
    style = {
    {
      marginTop: 10
    }
  }>
  <
    a
    style = {
    {
      fontSize: '12px'
    }
  }
    onClick = {this.toggleMore.bind(this)} >
      {this.state.showmore ? locale.collapse : locale.advancedOptions}
      < /a>
      < /div>
      < /Form.Item>
      < div
    style = {
    {
      overflow: 'hidden', height
    :
      this.state.showmore ? 'auto' : '0'
    }
  }>
  <
    Form.Item
    label = "Group ID:"
    required
    {...
      formItemLayout
    }
  >
  <
    Input
    htmlType = "text"
    disabled = {'disabled'}
    {...
      init('group')
    }
    />
    < /Form.Item>
    < Form.Item
    label = {locale.home}
    required
    {...
      formItemLayout
    }
  >
  <
    Input
    htmlType = "text"
    disabled = {'disabled'}
    {...
      init('appName')
    }
    />
    < /Form.Item>
    < /div>
    < Form.Item
    label = {locale.region}
    required
    {...
      formItemLayout
    }
  >
  <
    Input
    htmlType = "text"
    disabled = {'disabled'}
    {...
      init('envs')
    }
    />
    < /Form.Item>

    < Form.Item
    label = {locale.configuration}
    required
    {...
      formItemLayout
    }
  >
  <
    Input.TextArea
    htmlType = "text"
    multiple
    rows = {15}
    disabled = {'disabled'}
    {...
      init('content')
    }
    />
    < /Form.Item>
    < Form.Item
    label = {locale.target}
    required
    {...
      formItemLayout
    }
  >
  <
    div >
    < Checkbox.Group
    value = {this.state.envvalues}
    onChange = {this.changeEnv.bind(this)}
    dataSource = {this.state.envlist}
    />
    < /div>
    < /Form.Item>
    < Form.Item
    label = " "
    {...
      formItemLayout
    }
  >
  <
    div
    style = {
    {
      textAlign: 'right'
    }
  }>
  <
    Button
    type = "primary"
    onClick = {this.sync.bind(this)}
    style = {
    {
      marginRight: 10
    }
  }>
    {
      locale.sync
    }
  <
    /Button>
    {
    }
  <
    Button
    type = "light"
    onClick = {this.goList.bind(this)} >
      {locale.back}
      < /Button>
      < /div>
      < /Form.Item>
      < /Form>
      < SuccessDialog
    ref = {this.successDialog}
    />
    < /Loading>
    < /div>
  )
    ;
  }
}

export default ConfigSync;
